<template>
  <div class="p-[16px] bg-[var(--base-color)]" style="height: calc(100% - 8px)">
    <div class="mb-[24px]" v-for="(item, i) in dataList" :key="i">
      <div class="flex items-center mb-[7px]">
        <div v-for="itemc in skuConfig" :key="itemc.field" class="flex items-center text-[14px] leading-[20px] mr-[84px]">
          <span>{{ itemc.label }}：</span>
          <span>{{ item[itemc.field] }}</span>
          <span v-if="item.count" class="text-[#fff] text-[12px] bg-[#faad14] rounded-[2px] px-[8px] ml-[4px]"> *12 </span>
        </div>
      </div>
      <vxe-table align="center" border="full" round :data="item.inventory">
        <vxe-column field="warehouse_name" title="仓库名称"></vxe-column>
        <vxe-column field="sku" title="系统SKU"></vxe-column>
        <vxe-column field="seller_sku" title="渠道SKU"></vxe-column>
        <vxe-column field="fn_sku" title="海外仓SKU"></vxe-column>
        <vxe-column field="asin" title="ASIN"></vxe-column>
        <vxe-column field="owner_name" title="货主"></vxe-column>
        <vxe-column field="num" title="可用库存"></vxe-column>
        <vxe-column field="lock_num" title="锁定库存"></vxe-column>
        <vxe-column field="transit_num" title="在途库存"></vxe-column>
      </vxe-table>
    </div>
  </div>
</template>
<script setup lang="jsx">
import req from "@/views/user/list/add/api/index"
const props = defineProps({
  detail: { type: Object, default: () => ({}) },
})

const router = useRouter()
const { id } = router.currentRoute.value.query || {}

const skuConfig = [
  { label: "产品SKU", field: "sku" },
  { label: "自定义SKU", field: "fn_sku" },
  { label: "渠道SKU", field: "seller_sku" },
]

const descMatch = {
  sku: "sku",
  fn_sku: "自定义SKU",
  seller_sku: "渠道SKU",
}

const dataList = ref([])

const initData = async (params) => {
  const res = await req.ownerInventory({ data: params })

  const { products } = props.detail
  res.data.forEach((item) => {
    products.forEach((val) => {
      if (item.sku == val.sku) {
        item.fn_sku = val.custom_sku
        item.seller_sku = val.platform_sku
      }
    })
  })
  dataList.value = res.data
}

watch(
  () => props.detail,
  (value) => {
    const { products } = value
    if (!products) return
    const params = products.map((v) => ({ sku: v.sku }))
    initData(params)
  },
  { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped></style>
